<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>

    <%@ include file="/include/head.jsp"%>
    <title></title>
    <link rel="stylesheet" href="${rootPath}/static/css/hospital.css">
    <link rel="stylesheet" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css">
    <script src="${rootPath}/static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}/static/js/mui.pullToRefresh.material.js"></script>
    <script src="${rootPath}/static/js/paginationRequest.js"></script>
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>

    <script>
        var dataListUrl="${rootPath}/wap/seller/sellerProductList.do?sellerId=${querySeller.id}&";
        //var dataListUrl=interfaces["hospitalList"];
        mui.init();

        //页面基础配置
        $(function(){
            //初始化上下滑动后tab切换栏变化监听
            listenSwiperUpDown({
                target:$("#slider"),
                sibling:$(".hospitalInfoBox")
            });
            //初始化可自由滑动和放大的图片列表
//            initFreeSwiper({
//                target:".swiper-container",
//                clickTar:$(".swiper-slide")
//            });

            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
            //收藏
            var collectionVueObj = new Vue({
                el:"#collectionVueBox",
                data:{
                    isCollected:false
                },
                methods:{
                    setCollect:function(id){
                        var _this = this;
                        $.get("onclickSellerCollect.do"+"?sellerId="+id+"&isCollect="+!this.isCollected,function(msg){
                            if(msg.success){
                                _this.isCollected = !_this.isCollected;
                            }
                        });

                    }
                }
            })



        })
    </script>
</head>

<body>
<!-- 主页面标题 -->
        <%@ include file="/include/header-search-shopCar.jsp"%>
        <div class="mui-content">
            <div class="hospitalInfoBox">
                <div class="mui-row qy-padding-vertical-8 qy-padding-horizontal-8">
                    <div class="mui-col-xs-3"><img style="width: 90%;max-height:95px;" src="${querySeller.thumbnailImg}" alt=""></div>
                    <div class="mui-col-xs-9" style="height:100px;">
                        <div class="qy-text-white font-size-16">${querySeller.name}</div>
                        <div class="qy-text-white font-size-12 qy-padding-top-8">${querySeller.address}</div>
                        <div class="qy-text-white font-size-12">${querySeller.businessHours}</div>
                    </div>
                    <div class="mui-col-xs-12">
                        <div class="qy-text-white font-size-12 qy-flex qy-flex-text-between qy-padding-horizontal-8">
                            <div class="qy-flex">
                            <c:forEach items="${querySeller.serveLabels}" var="sl">
                                <span class="qy-flex-equalSpace qy-flex qy-padding-right-8">
                                    <small>
                                        <i class="qy-text-icon ${sl.classPropertyName}">${sl.classPropertyFont}</i>
                                    </small>
                                    <small>${sl.classPropertyText}</small>
                                </span>
                            </c:forEach>
                            </div>
                            <div class="collectionInfoBox qy-text-center" id="collectionVueBox">
                                <span v-on:click="setCollect(${querySeller.id})" v-if="isCollected" class="qy-bg-white qy-text-warning mui-block qy-padding-vertical-8" style="padding-top: 2px;">已收藏</span>
                                <span v-on:click="setCollect(${querySeller.id})"  v-else class="qy-bg-warning qy-text-white mui-block qy-padding-vertical-8" style="padding-top: 2px;">收藏</span>
                                <small class="qy-text-white">${querySeller.collectAccount+querySeller.virtualCollectAccount}人</small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="slider" class="mui-slider mui-fullscreen">
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item mui-active" href="#item1mobile">
                        首页
                    </a>
                    <a class="mui-control-item" href="#item2mobile">
                        全部体检
                    </a>
                    <a class="mui-control-item" href="#item3mobile">
                        上新
                    </a>
                    <a class="mui-control-item" href="#item4mobile">
                        销量
                    </a>
                    <a class="mui-control-item" href="#item5mobile">
                        评价<b class="qy-text-warning">(${querySeller.commentScore})</b>
                    </a>
                </div>
                <div class="mui-slider-group">
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <div class="qy-bg-white qy-margin-top-8 qy-padding-bottom-8">
                                    <div class="qy-flex qy-flex-text-center qy-padding-horizontal-8">
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                        <small class="qy-text-label">重点科室</small>
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                    </div>
                                    <div class="qy-flex">
                                        <c:forEach items="${hospitalKeyDepartmentLsit}" var="hkdl">
                                        <a class="qy-flex-equalSpace qy-flex qy-flex-direction-column qy-text-center" href="">
                                            <img src="${hkdl.logo}" style="height: 40px;width: auto;" alt="">
                                            <small class="qy-text-black">${hkdl.name}</small>
                                        </a>
                                        </c:forEach>
                                    </div>
                                </div>

                                <div class="qy-bg-white qy-margin-top-8 qy-padding-bottom-8">
                                    <div class="qy-flex qy-flex-text-center qy-padding-horizontal-8">
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                        <small class="qy-text-label">机构专家</small>
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                    </div>
                                    <div class="mui-row">
                                        <c:forEach items="${specialistList}" var="sll">
                                        <a class="mui-col-xs-3 qy-text-center" href="">
                                            <img class="mui-block qy-margin-vertical-auto" src="${sll.img}" style="height: 60px;width: auto;" alt="">
                                            <small class="qy-text-black mui-block qy-margin-vertical-auto">${sll.name}</small>
                                            <small class="qy-text-label mui-block qy-margin-vertical-auto">${sll.hospitalDepartmentName}</small>
                                        </a>
                                        </c:forEach>
                                    </div>
                                </div>

                                <div class="qy-bg-white qy-margin-top-8 qy-padding-bottom-8">
                                    <div class="qy-flex qy-flex-text-center qy-padding-horizontal-8">
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                        <small class="qy-text-label">机构介绍</small>
                                        <hr style="width: 40%;border:none;border-top: 1px solid rgb(204, 204, 204);"/>
                                    </div>
                                    <div class="qy-text-black qy-padding-vertical-8 qy-text-justify qy-text-indent-24">
                                        <small>${querySeller.des}</small>
                                    </div>
                                </div>




                                    <ul id="vueListBox0" style="display: none" class="mui-table-view">
                                        <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                            <div class="mui-row">
                                                <div class="mui-col-xs-3">
                                                    <%--<img v-bind:src=ele.logoUrl alt="">--%>
                                                    <img style="width: 90%;" src="http://web.qydjk.org/resource/front/shop/image/product/20171204/2017120417060002033121.png" alt=""> </div>
                                                <div class="mui-col-xs-9">
                                                    <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                                    <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                                        <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.salesPrice}}</span>
                                                    </div>
                                                    <div class="qy-flex qy-flex-text-between">
                                                        <del class="font-size-12 qy-text-label">&yen;{{ele.marketPrice}}</del>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                            </div>
                        </div>
                    </div>
                    <div id="item2mobile" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll" id="vueListBox1">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    </div>
                                </div>
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                        <div class="mui-row">
                                            <div class="mui-col-xs-3">
                                                <%--<img v-bind:src=ele.logoUrl alt="">--%>
                                                <img style="width: 90%;" :src="ele.thumbnailImg" alt=""> </div>
                                            <div class="mui-col-xs-9">
                                                <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                                <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                                    <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.price}}</span>
                                                </div>
                                                <div class="qy-flex qy-flex-text-between">
                                                    <del class="font-size-12 qy-text-label">&yen;{{ele.originPrice}}</del>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="item3mobile" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll" id="vueListBox2">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    </div>
                                </div>
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                        <div class="mui-row">
                                            <div class="mui-col-xs-3">
                                                <%--<img v-bind:src=ele.logoUrl alt="">--%>
                                                <img style="width: 90%;" :src="ele.thumbnailImg" alt=""> </div>
                                            <div class="mui-col-xs-9">
                                                <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                                <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                                    <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.price}}</span>
                                                </div>
                                                <div class="qy-flex qy-flex-text-between">
                                                    <del class="font-size-12 qy-text-label">&yen;{{ele.originPrice}}</del>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="item4mobile" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll" id="vueListBox3">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    </div>
                                </div>
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                        <div class="mui-row">
                                            <div class="mui-col-xs-3">
                                                <%--<img v-bind:src=ele.logoUrl alt="">--%>
                                                <img style="width: 90%;" :src="ele.thumbnailImg" alt=""> </div>
                                            <div class="mui-col-xs-9">
                                                <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                                <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                                    <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.price}}</span>
                                                </div>
                                                <div class="qy-flex qy-flex-text-between">
                                                    <del class="font-size-12 qy-text-label">&yen;{{ele.originPrice}}</del>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="item5mobile" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll" id="vueListBox4">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    </div>
                                </div>
                                <div class="mui-table-view">
                                    <div class="qy-bg-white qy-margin-top-8 qy-padding-8" v-for="ele in datas">
                                    <div class="qy-flex qy-flex-text-between">
                                        <div class="qy-flex">
                                            <span style="border: 2px solid #019EEB;border-radius: 50%;overflow: hidden;display: inline-block;height: 24px;width: 24px;">
                                                <img style="height: 100%;" :src="ele.headurl" alt="">
                                            </span>
                                            <span class="qy-text-16 qy-margin-vertical-8">
                                            {{ele.username}}
                                            </span>
                                        </div>

                                        <div class="qy-text-warning">
                                            评分:{{ele.star}}
                                        </div>
                                    </div>

                                    <div class="qy-margin-top-8">
                                        <small class="qy-text-label">机构服务:</small>
                                        <span v-if="ele.organizationSeiviceScore == 0 ||ele.organizationSeiviceScore == 1">
                                        <small class="qy-text-warning qy-margin-vertical-8">差评</small>
                                        </span>
                                        <span v-if="ele.organizationSeiviceScore == 3 ||ele.organizationSeiviceScore == 2">
                                        <small class="qy-text-warning qy-margin-vertical-8">一般</small>
                                        </span>
                                        <span v-if="ele.organizationSeiviceScore == 4 ||ele.organizationSeiviceScore == 5">
                                        <small class="qy-text-warning qy-margin-vertical-8">满意</small>
                                        </span>
                                        <small class="qy-text-label">机构环境:</small>
                                        <span v-if="ele.organizationEnvironmentScore == 0 ||ele.organizationEnvironmentScore == 1">
                                        <small class="qy-text-warning qy-margin-vertical-8">差评</small>
                                        </span>
                                        <span v-if="ele.organizationEnvironmentScore == 3 ||ele.organizationEnvironmentScore == 2">
                                        <small class="qy-text-warning qy-margin-vertical-8">一般</small>
                                        </span>
                                        <span v-if="ele.organizationEnvironmentScore == 4 ||ele.organizationEnvironmentScore == 5">
                                        <small class="qy-text-warning qy-margin-vertical-8">满意</small>
                                        </span>
                                    </div>

                                    <div class="qy-margin-top-8 qy-text-indent-24 qy-text-justify">
                                        <span class="qy-text-16">
                                           {{ele.content}}
                                        </span>
                                    </div>
                                    <%--图片滑动区域--%>
                                    <div v-if="ele.commentImgs.length>0" :selfCode="'swiper-container'+ele.id" :class="'swiper-container'+ele.id" class="swiper-container" v-focus>
                                        <div class="swiper-wrapper">
                                            <div style="width: auto;" :selfCode="'swiper-slide'+ele.id" :class="'swiper-slide'+ele.id" class="swiper-slide" v-for="img in ele.commentImgs">
                                                <img style="height: 100px;width: auto;" :src="img.thumbnailImg" alt="">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="qy-margin-horizontal-8 qy-bg-default qy-text-justify qy-padding-vertical-8">
                                        <span class="qy-text-16 qy-text-label">
                                            机构回复: {{ele.replyContent}}
                                        </span>
                                    </div>

                                </div>
                                </div>
                                <!----->

                            </div>
                        </div>
                    </div>
            </div>
        </div>
        </div>
</body>

</html>